
<!--问题类型管理-->
<template>
	<div>
		<!--查询部分-->
		<el-row>
			<el-col :span="1">
				<p class="queryLabel">分类名称：</p>
			</el-col>
			<el-col :span="3" style="padding-left: 10px;">
				<el-input v-model="queryData.numberName" size="small" placeholder="请输入编号"></el-input>
			</el-col>
			<el-col :span="1" style="padding-left: 10px;">
				<el-button size="small" type="primary" @click="queryButton">查 询</el-button>
			</el-col>
			<el-col :span="1" style="margin-left: 200px;">
				<el-button size="small" type="primary" @click="addButton">新 增</el-button>
			</el-col>
			<el-col :span="1" style="padding-left: 10px;">
				<el-button size="small" type="primary" @click="editButton">编 辑</el-button>
			</el-col>
			<el-col :span="1" style="padding-left: 10px;">
				<el-button size="small" type="primary" @click="startButton">启 用</el-button>
			</el-col>
			<el-col :span="1" style="padding-left: 10px;">
				<el-button size="small" type="primary" @click="stopButton">停 用</el-button>
			</el-col>
		</el-row>
		
		<!--表格部分-->
		<el-row>
			<el-col :span = "24">
				<el-table :data="tableData.dataList" stripe border @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="50">
					</el-table-column>
					<el-table-column prop="groupCode" label = "分类编号" width="220"></el-table-column>
					<el-table-column prop="groupName" label = "分类名称" width="220"></el-table-column>
					<el-table-column prop="dispOrder" label = "显示顺序" width="220"></el-table-column>
					<el-table-column label = "状态" width="220" :formatter="statusCov"></el-table-column>
				</el-table>
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" @current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total,prev, pager, next" :total="tableData.total"></el-pagination>
			</el-col>
		</el-row>
		
		<el-dialog title="新增" v-model="addDialogShow" size = "tiny">
			
			
			<el-form :model="editData" :rules="rules" ref="editData" label-width="100px" class="demo-ruleForm">
			  <el-form-item label="分类编号" prop="groupCode">
			    <el-input v-model="editData.groupCode"></el-input>
			  </el-form-item>
			  
			  <el-form-item label="分类名称" prop="groupName">
			    <el-input v-model="editData.groupName"></el-input>
			  </el-form-item>
			  
			  <el-form-item label="显示顺序" prop="dispOrder">
			    <el-input v-model="editData.dispOrder"></el-input>
			  </el-form-item>
			</el-form>
			
			<el-row>
				<el-col :span="12">
					<el-button type="primary" size="small" style="margin-left: 100px;" @click="addSubmit('editData')">提 交</el-button>	
				</el-col>
				<el-col :span="12">
					<el-button type="primary" size="small" style="margin-left: 70px;" @click="addCansel">取 消</el-button>
				</el-col>
			</el-row>
			
		</el-dialog>
		
		<el-dialog title="编辑" v-model="editDialogShow" size = "tiny">
			
			<el-form :model="editData" :rules="rules" ref="editData" label-width="100px" class="demo-ruleForm">
			  <el-form-item label="等级编号" prop="groupCode">
			    <el-input v-model="editData.groupCode"></el-input>
			  </el-form-item>
			  
			  <el-form-item label="等级名称" prop="groupName">
			    <el-input v-model="editData.groupName"></el-input>
			  </el-form-item>
			  
			  <el-form-item label="显示顺序" prop="dispOrder">
			    <el-input v-model="editData.dispOrder"></el-input>
			  </el-form-item>
			</el-form>
			
			<el-row>
				<el-col :span="12">
					<el-button type="primary" size="small" style="margin-left: 100px;" @click="editSubmit('editData')">提 交</el-button>
				</el-col>
				<el-col :span="12">
					<el-button type="primary" size="small" style="margin-left: 70px;" @click="editCansel">取 消</el-button>
				</el-col>
			</el-row>
		</el-dialog>
		
		
	</div>
</template>

<script>
	export default {
		data:function(){
			return{
				 rules: {
		          groupCode: [
		            { required: true, message: '请输入分类编号', trigger: 'blur' }
		           
		          ],
		           groupName: [
		            { required: true, message: '请输入分类名称', trigger: 'blur' }
		           
		          ],
		           dispOrder: [
		            { required: true, message: '请输入显示顺序', trigger: 'blur' }
		           
		          ],
		          
				 },
				// 新增dialog显示
				addDialogShow:false,
				//  编辑dialog 显示
				editDialogShow:false,
				// 查询集合
				queryData:{
					numberName:"",
				},
				CurentPage: 1,
				page: this.page,
				// 查询数据
				tableData:{
					total:0,
					dataList:[],
				},
				// 修改数据
				editData:{
					groupCode:"",
					groupName:"",
					id:"",
					status:"",
					dispOrder:"",
					
				},
				// 修改数据初始化
				emptyEditData:{
					groupCode:"",
					groupName:"",
					id:"",
					status:"",
					dispOrder:"",
					
				},
				// 选择数据
				multipleSelection:"",
				
			}
		},
		methods:{
			//选择框
			handleSelectionChange: function(val) {
				debugger;
				this.$data.multipleSelection = val;
				/*if(this.$data.multipleSelection.length > 1)
					this.$message.error("请选择一条数据！");*/
			},
			// 查 询 
			queryButton:function(){
				//alert("查询");
				debugger;
				this.$http.get(this.API_ROOT + '/crm/base/survery/group/page', {
					params: {
						groupCode:this.$data.queryData.numberName,
						start:this.CurentPage,
						limit: this.$data.page.pageSize,
					}
				}).then(resp => {
					if(resp.data.success) {
						resp.data.total = parseInt(resp.data.total);
						this.$data.tableData.dataList = resp.data.dataList;
						this.$data.tableData.total = resp.data.total;
					} else {
						this.$message.error(resp.data.msg);
					}
				}, resp => {
				});
			},
			// 添加按钮
			addButton:function(){
				//alert("新增");
				this.$data.editData = Object.assign(this.$data.editData, this.$data.emptyEditData);
				this.$data.addDialogShow = true;
			},
			
			/**编辑按钮**/
			editButton:function(){
				if(this.$data.multipleSelection.length != 1){
					this.$message.error("请选择一条数据");
					return;
				}
				//alert("编辑");
				this.$data.editData = Object.assign(this.$data.editData, this.$data.emptyEditData);
				this.getDataById();
				this.$data.editDialogShow = true;
			},
			// 编辑获取选中信息
			getDataById:function(){
				debugger;
				this.$http.get(this.API_ROOT + '/crm/base/survery/group/info', {
					params: {
						id:this.$data.multipleSelection[0].id,
					}
				}).then(resp => {
					if(resp.data.success) {
						//this.$message(resp.data.msg);
						this.$data.editData.groupName = resp.data.data.groupName;
						this.$data.editData.groupCode = resp.data.data.groupCode;
						this.$data.editData.id = resp.data.data.id;
						this.$data.editData.dispOrder = resp.data.data.dispOrder.toString();
						this.$data.editData.status = resp.data.data.status;
					} else {
						//this.$message.error(resp.data.msg);
					}
				}, resp => {
				});
			},
			// 启用
			startButton:function(){
				//alert("启用");
				if(this.$data.multipleSelection.length != 1){
					this.$message.error("请选择一条数据");
					return;
				}
				this.$http.get(this.API_ROOT + '/crm/base/survery/group/start', {
					params: {
						id:this.$data.multipleSelection[0].id,
					}
				}).then(resp => {
					if(resp.data.success) {
						this.$message(resp.data.msg);
						this.queryButton(); // 刷新
						this.$data.multipleSelection = []; // 选择置空
					} else {
						this.$message.error(resp.data.msg);
						this.queryButton(); // 刷新
						this.$data.multipleSelection = []; // 选择置空
					}
				}, resp => {
				});
			},
			// 停用
			stopButton:function(){
				//alert("停用");
				if(this.$data.multipleSelection.length != 1){
					this.$message.error("请选择一条数据");
					return;
				}
				this.$http.get(this.API_ROOT + '/crm/base/survery/group/stop', {
					params: {
						id:this.$data.multipleSelection[0].id,
					}
				}).then(resp => {
					if(resp.data.success) {
						this.$message(resp.data.msg);
						this.queryButton(); // 刷新
						this.$data.multipleSelection = []; // 选择置空
					} else {
						this.$message.error(resp.data.msg);
						this.queryButton(); // 刷新
						this.$data.multipleSelection = []; // 选择置空
					}
				}, resp => {
				});
			},
			/**【添加】提交**/
			addSubmit:function(formName){
				//alert("新增提交");
				
				 this.$refs[formName].validate((valid) => {
		          if (valid) {
		            
		           this.$http.post(this.API_ROOT + '/crm/base/survery/group/save',this.$data.editData ,{
						params: {
						}
					}).then(resp => {
						if(resp.data.success) {
							resp.data.total = parseInt(resp.data.total);
							this.$data.tableData.dataList = resp.data.dataList;
							this.$data.tableData.total = resp.data.total;
							this.$data.addDialogShow = false;
							this.$message("保存成功！");
							this.queryButton();
						} else {
							this.$message.error(resp.data.msg);
						}
					}, resp => {
					});
					
		          } else {
		            this.$message.error("表单填写不全！");
		            return false;
		          }
		        });
				
				
				
			},
			/**【添加】取消**/
			addCansel:function(){
				//alert("新增取消");
				this.$data.addDialogShow = false;
			},
			
			/** 【编辑】提交 **/
			editSubmit:function(formName){
				
				this.$refs[formName].validate((valid) => {
		          if (valid) {
		          	
		          	//alert("新增提交");
					this.$data.editData.id = this.$data.multipleSelection[0].id;
					this.$http.post(this.API_ROOT + '/crm/base/survery/group/save',this.$data.editData ,{
						params: {
						}
					}).then(resp => {
						if(resp.data.success) {
							resp.data.total = parseInt(resp.data.total);
							this.$data.tableData.dataList = resp.data.dataList;
							this.$data.tableData.total = resp.data.total;
							this.$data.editDialogShow = false;
							this.$message("保存成功！");
							this.queryButton();
						} else {
							this.$message.error(resp.data.msg);
						}
					}, resp => {
					});
					
		          }else {
		            this.$message.error("表单填写不全！");
		            return false;
		          }
				});
			},
			/**【编辑】 取消**/
			editCansel:function(){
				//alert("新增取消");
				this.$data.editDialogShow = false;
			},
			
			//列表分页大小切换
			handleSizeChange: function() {},
			//列表当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				this.queryButton();
			},
			// 状态转换
			statusCov:function(row){
				switch (row.status) {
					case '0':
					return "未启用";
					break;
					case '1':
					return "已启用";
					break;
					default:
					return "状态未知";
					break;
					
				}
			},
		},
		created:function(){
			this.queryButton();
		}
	}
</script>

<style>
</style>